<h2>{{hero1.name | uppercase}} Details</h2>
<!-- 绑定表达式中的 uppercase 位于管道操作符（ | ）的右边，用来调用内置管道 UppercasePipe。 -->
<!-- 管道 是格式化字符串、金额、日期和其它显示数据的好办法。 Angular 发布了一些内置管道，而且你还可以创建自己的管道。 -->

<!-- ngModel是angular的双向绑定语法  -->
<!-- <div>
    <label>name:
    <input [(ngModel)]="hero1.name" placeholder="name"/>
  </label>
</div> -->

<h2>My Heroes</h2>
<ul class="heroes">
    <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
</ul>

<hero-detail [hero]="selectedHero"></hero-detail>